<template>
  <div class="data-content">
      <div class="ks-item">
        <img class="item-img" src="@/assets/self_media/fans.png" />
        <div class="item-info">
          <div class="info-title">粉丝总量</div>
          <div class="info-detail">{{accountTotalData.fansCount | dataFormat}}</div>
        </div>
      </div>
      <div class="ks-item">
        <img class="item-img" src="@/assets/self_media/follow.png" />
        <div class="item-info">
          <div class="info-title">关注数</div>
          <div class="info-detail">{{accountTotalData.follow | dataFormat}}</div>
        </div>
      </div>
      <div class="ks-item">
        <img class="item-img" src="@/assets/self_media/view.png" />
        <div class="item-info">
          <div class="info-title">播放量</div>
          <div class="info-detail">{{accountTotalData.viewCount | dataFormat}}</div>
        </div>
      </div>
      <div class="ks-item">
        <img class="item-img" src="@/assets/self_media/comment.png" />
        <div class="item-info">
          <div class="info-title">评论数</div>
          <div class="info-detail">{{accountTotalData.commentCount | dataFormat}}</div>
        </div>
      </div>
      <div class="ks-item">
        <img class="item-img" src="@/assets/self_media/like.png" />
        <div class="item-info">
          <div class="info-title">点赞量</div>
          <div class="info-detail">{{accountTotalData.likeCount | dataFormat}}</div>
        </div>
      </div>
      <div class="ks-item">
        <img class="item-img" src="@/assets/self_media/share.png" />
        <div class="item-info">
          <div class="info-title">转发量</div>
          <div class="info-detail">{{accountTotalData.forwardCount | dataFormat}}</div>
        </div>
      </div>
      <div class="ks-item">
        <img class="item-img" src="@/assets/self_media/dynamics.png" />
        <div class="item-info">
          <div class="info-title">动态数</div>
          <div class="info-detail">{{accountTotalData.worksCount | dataFormat}}</div>
        </div>
      </div>
      <div class="ks-item">
        <img class="item-img" src="@/assets/self_media/open.png" />
        <div class="item-info">
          <div class="info-title">公开的动态数</div>
          <div class="info-detail">{{accountTotalData.photoPublic | dataFormat}}</div>
        </div>
      </div>
      <div class="ks-item">
        <img class="item-img" src="@/assets/self_media/hide.png" />
        <div class="item-info">
          <div class="info-title">隐蔽的动态数</div>
          <div class="info-detail">{{accountTotalData.photoPrivate | dataFormat}}</div>
        </div>
      </div>
  </div>
</template>

<script>

  export default {
    name: "KsData",
    props: ['accountTotalData', 'color'],
    data() {
      return {
        itemList: [],
        titleColor: '',
        detailColor: ''
      }
    },
    created() {
      if (this.color) {
        this.titleColor = '#fff';
        this.detailColor = '#fff';
      } else {
        this.titleColor = '#666666';
        this.detailColor = '#333333';
      }
    },
    methods: {
    }
  }
</script>

<style scoped lang="less">
@titleColor: v-bind(titleColor);
@detailColor: v-bind(detailColor);

.data-content {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 24px 16px 0 16px;
  .ks-item {
    width: 20%;
    overflow: hidden;
    margin-bottom: 24px;
    .item-img {
      width: 36px;
      height: 36px;
      float: left;
      margin-right: 10px;
      margin-top: 5px;
    }
    .item-info {
      float: left;
      .info-title {
        font-size: 12px;
        color: @titleColor;
      }
      .info-detail {
        font-weight: bold;
        font-size: 20px;
        color: @detailColor;
        .info-divider {
          display: inline-block;
          font-size: 20px;
          color: #E2E6ED;
          margin: 0 10px;
          font-weight: normal !important;
        }
      }
    }
  }
}

</style>